<template>
    <div class="app-container">
        <div class="flashBox">
            <div class="adminSearchBox">
                <div class="adminSearchTop">
                    <div class="adminSearchLeft">
                        <Search style="width: 1em; height: 1em; margin-right: 8px" />
                        <div>筛选搜索</div>
                    </div>
                    <div class="adminSearchRight">
                        <el-button @click="reset">重置</el-button>
                        <el-button type="primary" @click="queryList">查询搜索</el-button>
                    </div>
                </div>
                <div class="parentSearchBox">
                    <div class="adminSearch">
                        <span> 活动名称：</span>
                        <el-input size="default" v-model="adminSearchVal.keyword" placeholder="请输广告名称" />
                    </div>

                </div>
            </div>
            <div class="dataListBox">
                <div class="TicketsLeft">
                    <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                    <div>数据列表</div>
                </div>
                <div>
                    <el-button type="primary" @click="killTimeFn">秒杀时间段列表</el-button>
                    <el-button type="primary" @click="addFn">添加</el-button>
                </div>


            </div>

            <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" style="text-align: center;" />
                <el-table-column prop="id" label="编号" />
                <el-table-column prop="title" label="活动标题" />
                <el-table-column prop="status" label="活动状态 ">
                    <template #default="{ row }">
                        {{ row.status }}
                    </template>
                </el-table-column>
                <el-table-column label="开始时间">
                    <template #default="scoped">
                        {{ dayjs(scoped.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="到期时间">
                    <template #default="scoped">
                        {{ dayjs(scoped.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="上线/下线">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                            @click="hdSwitchStatus(row)" />
                    </template>
                </el-table-column>
                <el-table-column width="260" label="操作">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="setFn(row)">设置商品</el-button>
                        <el-button link type="primary" size="small" @click="editFn(row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="deleteFn(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :flashRuleForm="tableData" />

        </div>
        <flashDialog :flashDialogVisible="flashDialogVisible" @cancel="hdCancel" @confirm="hdConfirm" :id="editID"
            :flashRuleForm="flashRuleForm" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import useTable from '@/hooks/components/useTable'
import * as http from '@/request/http';
import { Search, Tickets } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import { useRouter } from 'vue-router'
import flashDialog from './components/flashDialog.vue';
const router = useRouter()
const editID = ref(0)
const adminSearchVal = reactive({
    keyword: '',
})
const flashDialogVisible = ref(false)

const hdConfirm = () => { flashDialogVisible.value = false }
// 重置
const reset = () => {
    console.log(adminSearchVal.keyword);
    adminSearchVal.keyword = ''
}

const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.flash.flashList, adminSearchVal)
const hdCancel = () => {
    queryList()
    flashDialogVisible.value = false
}
const killTimeFn = () => { router.push('flashSession') }
const setFn = (row: IFlashCreateParams) => {
    console.log(row);
    router.push(`selectSession?flashPromotionId=${row.id}`)
    editID.value = 0
    flashDialogVisible.value = true
}
const addFn = () => {
    editID.value = 0
    flashDialogVisible.value = true
}
const deleteFn = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该活动?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http.flash.flashDeleteId(id).then(res => {
            if (res.code === 200) {
                ElMessage.success('删除成功')
                queryList()
            } else {
                ElMessage.error('未成功删除')
            }
        })
    }).catch(() => {
        ElMessage.success('已取消操作')
    })
}
const flashRuleForm = reactive<IFlashCreateParams>({
    id: 0,
    title: '',
    status: 1,
    createTime: '',
    endDate: '',
    startDate: '',
})
const editFn = (row: IFlashCreateParams) => {
    console.log(row)
    editID.value = row.id
    Object.assign(flashRuleForm, row)
    flashDialogVisible.value = true
}
const handleSelectionChange = () => { }
//更改状态
const hdSwitchStatus = (row: IAdvertiseList) => {
    ElMessageBox.confirm(
        '是否要修改该状态 ? ',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        }).then(() => {
            http.flash.flashUpdateStatus({ id: row.id, status: row.status }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    ElMessage.success('更新成功');
                    queryList()
                } else {
                    row.status = row.status == 1 ? 0 : 1
                    ElMessage.error('更新失败')
                }
            })
        }).catch(() => {
            row.status = row.status == 1 ? 0 : 1
            console.log(row.status);
            ElMessage.success('已取消操作')
            queryList()
        })
}
// console.log(typeof tableData );

</script>

<style scoped>
/* .flashBox {} */
:deep(.cell) {
    text-align: center;
}

.parentSearchBox {
    display: flex;
    padding: 5px;
}

.adminSearchBox {
    margin-top: 40px;
    padding: 20px;
    height: 90px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .adminSearchTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .adminSearchLeft {

            display: flex;
            align-items: center;
        }
    }
}

.adminSearch {
    padding-left: 50px;
    padding-top: 20px;
    margin-right: 40px;

    .el-input {
        width: 190px;
    }
}

.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}
</style>